<!-- 输入框 -->
<template>
	<view class="">
		<u-overlay :show="input_show" @click="input_out()">
			<view class="m-bg-w boxbc">
				<view class="u-flex w_100 u-p-20">
					<input
						id="idName"
						@focus="textareaFocus"
						@input="val_input"
						v-model="text_val"
						:placeholder="plac_text"
						type="input"
						:fixed="true"
						:focus="input_focus"
						class="input_text u-m-r-14 u-font-24"
						label-width="0"
						:clearable="false"
						:hold-keyboard="true"
						:confirm-hold="true"
						:border-bottom="false"
						maxlength="-1" 
						 @tap.stop 
						 placeholder="请输入评论内容"
					/>
					<view class="input_play val_on u-flex u-flex-items-center u-flex-center" v-if="val_on" @touchend.prevent="input_play">{{ text }}</view>
				</view>
				<view class="m-bg-w" :style="{ height: key_height + 'px' }"></view>
			</view>
		</u-overlay>
	</view>
</template>
<script>
/**
 * input_show 显示状态
 * plac  提示语
 * val  默认值
 * type 1 普通调起输入框 2 回复 3 评论
 *
 * input_out 父级页面的方法 调用隐藏
 * input_play 点击按钮执行父页面的方法
 */

export default {
	name: 'input-box',
	props: {
		//声明属性
		input_show: {
			type: Boolean,
			default: false
		},
		plac: {
			type: String,
			default: '请输入内容'
		},
		val: {
			type: String,
			default: ''
		},
		type: {
			type: Number,
			default: 1
		},
		key_height: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			adjustPosition: false,
			input_focus: false,
			text_val: this.val,
			val_on: false,
			plac_text: '',
			text: '回复'
		};
	},
	created() {
		// #ifdef APP-PLUS
		this.adjustPosition = true;
		// #endif
	},
	watch: {
		input_show(i1, i2) {
			this.input_focus = i1;
		},
		type(i1) {
			this.type_check();
		},
		plac(i1) {
			this.type_check();
		},
		val(i1) {
			this.val_check();
		}
	},
	methods: {
		textareaFocus(e) {
			//文本域聚焦触发
			// this.key_height = e.detail.height
		},
		input_out() {
			//执行关闭操作
			this.input_focus = false;
			this.$emit('input_out');
		},
		input_play() {
			//回复按钮
			this.$emit('input_out');
			if (!this.val_on) return false;
			var data = {};
			data.val = this.text_val;
			this.$emit('input_play', data, res => {
				if (res.status == 1001) {
					//接收到值的时候  执行这边的操作
					this.text_val = '';
				}
			});
		},
		val_input() {
			//input 输入触发
			this.text_val ? (this.val_on = true) : (this.val_on = false);
		},
		type_check() {
			// 当type值不同的时候 执行的操作
			this.plac_text = this.plac;
			if (this.type == 1) {
				this.text = '确定';
			} else if (this.type == 2 || this.type == 3) {
				this.text = '回复';
			}
		},
		plac_check() {
			//当type一样的时候  回复不同的人 显示不同的内容
			this.plac_text = '回复' + this.plac;
		},
		val_check() {
			//传默认值进来的时候 触发   有值的时候把按钮 放出来
			this.text_val = this.val;
			this.val_on = true;
		}
	}
};
</script>
<style lang="scss" scoped>
.rect {
	padding: 20rpx;
	background-color: #f7f7f7;
}

.input_text {
	background-color: #fff;
	width: 100%;
	border-radius: 10rpx;
	box-sizing: content-box;
	padding: 15rpx 20rpx;
}

.input_play {
	width: 15%;
	color: #c6c6c6;
	border: #c6c6c6 1rpx solid;
	border-radius: 10rpx;
}

.val_on {
	background: #e63226;
	color: #fff;
	border: none;
}

.boxbc{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
</style>
